<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的分离写法</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<c5></c5>
			<c6></c6>
		</div>
		<!--第一种方法 ：分离组件 注意：必须有type-->
		<script  id="cpn" type="text/x-template">
			<div ><!-- 这里写组件的 内容 -->
				<h2>谢应鹏</h2>
			</div>
		</script>
		<!-- 第二种方法：我们使用template 相对第一种方法比较简单-->
		<template id="cp">
			<div ><!-- 这里写组件的 内容 -->
				<h2>谢应鹏</h2>
			</div>
		</template>
		<script type="text/javascript">
			//注册一个全局组件 分离开来写
			Vue.component('c5',{
				template:'#cpn'//这里只需要放上面分离组件内容的id就行
			});
			Vue.computed('c6',{
				template:'#cp'
			};
			var app = new Vue({
				el:'#app',
				data:{
					
				}
			});
		</script>
	</body>
</html>
